<template>
	<view>
		<u-tabs
			class="tabs"
			:list="tabList"
			:is-scroll="false"
			:current="tabCurrent"
			:duration="0.2"
			font-size="32"
			active-color="#BB9E72"
			inactive-color="#333"
			:bar-style="{ height: '8rpx' }"
			@change="changeTabs"
		></u-tabs>
		<view class="coupon-list conponList" v-show="tabCurrent == 0">
			<view class="item" v-for="(item, index) in conponList" :key="index">
				<view class="top u-flex">
					<view class="left u-flex-col">
						<view class="price">
							<text>￥</text>
							<text class="main">{{ item.value / 100 }}</text>
							<text>.00</text>
						</view>
						<view class="desc">买满{{ item.bottomPrice / 100 }}可用</view>
					</view>
					<view class="right u-flex-col">
						<view class="describe">{{ item.couponDesc.nameDesc }}</view>
						<view class="time u-flex">
							<view>有效期至 {{ item.endTime | date('yyyy.mm.dd/hh:MM') }}</view>
							<view class="go-to-use" @click="toUse(item.target)">去使用</view>
						</view>
						<view class="tips" v-if="item.endTime < 1592000000">快过期</view>
					</view>
				</view>
				<view class="bottom">
					<text>{{ item.couponDesc.scopeDesc }}</text>
				</view>
			</view>
		</view>
		<view class="coupon-list disConponList" v-show="tabCurrent == 1">
			<view class="item" v-for="(item, index) in disConponList" :key="index">
				<view class="top u-flex">
					<view class="left u-flex-col">
						<view class="price">
							<text>￥</text>
							<text class="main">{{ item.value / 100 }}</text>
							<text>.00</text>
						</view>
						<view class="desc">买满{{ item.bottomPrice / 100 }}可用</view>
					</view>
					<view class="right u-flex-col">
						<view class="describe">{{ item.couponDesc.nameDesc }}</view>
						<view class="time u-flex">
							<view>有效期至 {{ item.endTime | date('yyyy.mm.dd/hh:MM') }}</view>
						</view>
						<view class="tips">已过期</view>
					</view>
				</view>
				<view class="bottom">
					<text>{{ item.couponDesc.scopeDesc }}</text>
				</view>
			</view>
		</view>
		<full-loading :show="fullLoading"></full-loading>
	</view>
</template>

<script>
import fullLoading from '@/components/full-loading.vue'
export default {
	data() {
		return {
			tabList: [
				{
					name: '未使用'
				},
				{
					name: '不可用'
				}
			],
			tabCurrent: 0,
			conponList: [],
			disConponList: [],
			fullLoading:true
		}
	},
	onLoad() {
		this.getConponList()
	},
	methods: {
		getConponList() {
			this.$u.api.couponList({type:this.tabCurrent}).then(res => {
				if (this.tabCurrent == 0) {
					this.conponList = res.data.couponInfos
				} else {
					this.disConponList = res.data.couponInfos
				}
				this.fullLoading = false
			})
		},
		changeTabs(e) {
			this.tabCurrent = e
			this.getConponList()
		},
		toUse(target) {
			if (target.indexOf('gid') != -1) {
				const gid = target.substring(target.length - 6)
				uni.navigateTo({
					url: '../../shop/goods/detail/detail?gid=' + gid
				})
			} else {
				uni.switchTab({
					url: '../../tabbar/index/index'
				})
			}
		}
	},
	components:{
		fullLoading
	}
}
</script>

<style lang="scss">
page {
	background-color: #f7f7f7;
}
.tabs {
	position: fixed;
	top: 0;
	width: 750rpx;
	background-color: #fff;
	z-index: 1;
}
.coupon-list {
	margin-top: 100rpx;
	padding: 0 20rpx;
	.item {
		margin-bottom: 30rpx;
		.top {
			width: 100%;
			height: 196rpx;
			background-color: #fff;
			.left {
				justify-content: center;
				align-items: center;
				width: 248rpx;
				height: inherit;
				.price {
					color: #fff;
					font-size: 32rpx;
					font-weight: bold;
					.main {
						font-size: 46rpx;
					}
				}
				.desc {
					margin-top: 20rpx;
					color: #fff;
					font-size: 26rpx;
					font-weight: bold;
				}
			}
			.right {
				position: relative;
				flex: 1;
				padding: 30rpx 20rpx;
				justify-content: space-between;
				height: inherit;
				.describe {
					font-size: 26rpx;
					line-height: 39rpx;
				}
				.time {
					font-size: 24rpx;
					.go-to-use {
						margin-left: 6rpx;
						width: 116rpx;
						height: 44rpx;
						text-align: center;
						line-height: 44rpx;
						color: #fff;
						border-radius: 22rpx;
						background-color: #dbad4b;
					}
				}
				.tips {
					position: absolute;
					right: 0;
					top: 0;
					width: 80rpx;
					height: 34rpx;
					line-height: 34rpx;
					text-align: center;
					font-size: 22rpx;
					color: #fff;
					border-radius: 0 12rpx 0 12rpx;
				}
			}
		}
		.bottom {
			padding: 16rpx 20rpx;
			font-size: 24rpx;
			color: #999;
			line-height: 36rpx;
			background-color: #f9f9f9;
			border-radius: 0 0 12rpx 12rpx;
		}
	}
}
.conponList{
	.left {
		background: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/72c7d790-ab34-11ea-b244-a9f5e5565f30.png') no-repeat center / 100% 100%;
	}
	.right {
		background: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/72b33e20-ab34-11ea-b244-a9f5e5565f30.png') no-repeat center / 100% 100%;
	}
	.tips{
		background-color: #e30d0d;
	}
}
.disConponList {
	.left {
		background: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/72cedc70-ab34-11ea-b244-a9f5e5565f30.png') no-repeat center / 100% 100%;
	}
	.right {
		background: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/72d39760-ab34-11ea-b997-9918a5dda011.png') no-repeat center / 100% 100%;
	}
	.tips{
		background-color: #999;
	}
}
</style>
